<template>
      <div class="image-container">
        <div class="image-bg" />
        <img  class="image-src" src="amtf-无量寿.png" alt="amtf-无量寿.png" />
      </div>
</template>

<style>
:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);

  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
  --vp-home-hero-image-filter: blur(40px);
  --amtf大高度:420px;
  --amtf小高度:360px;
}
.image-bg {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  border-radius: 50%;
  background-image: var(--vp-home-hero-image-background-image);
  filter: var(--vp-home-hero-image-filter);
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
  width: 100%;
  height:100%;
  }

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px);
  }
}

.container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1152px;
}

@media (min-width: 960px) {
  .container {
    flex-direction: row;
  }
}

.image-container {
  position: relative;
  margin: 0 auto;
  width: 320px;
  height: 320px;
}

@media (min-width: 640px) {
  .image-container {
    width: 392px;
    height: 392px;
  }
}

@media (min-width: 960px) {
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    /*rtl:ignore*/
    transform: translate(-32px, -32px);
  }
}



.image-src {
  position: absolute;
  top: 50%;
  /*rtl:ignore*/
  left: 50%;
  /* max-width: 100%; */
  max-height: 120%;
  /*rtl:ignore*/
  transform: translate(-50%, -50%);
}

/* @media (min-width: 640px) {
  .image-src {
    max-width:  var(--amtf小高度);
    max-height:  var(--amtf小高度);
  }
}

@media (min-width: 960px) {
  .image-src {
    max-width:  var(--amtf大高度);
    max-height: var(--amtf大高度);
  }
} */
</style>
